position: sticky 값 주기

April 08, 2020

sticky가 적용된 엘리먼트의 부모 요소의 height 범위 내에서 fixed으로 작동되지만 그 외의 영여에서 static으로 동작한다.

그렇기 때문에 header나 footer영역에 sticky값을 적용하고 싶을 때, 최상위 엘리먼트를 부모로를 기준으로 sticky bar를 생성한다.

<app-root>
	<header class="sticky"></header>
	<body></body>
</app-root>

.sticky {
	position: sticky;
	top: 0;
	display: block;
}

position: -webkit-sticky; 
position: sticky;

참고

JUlog에 오신걸 환영합니다🤗 저에 대해 궁금하다면, 👆제 이름을 눌러보세요